import React, {Component} from 'react';
import {SectionList, StyleSheet, Text, View} from 'react-native';

/** DES: 带组ListView*/
export default class TestSectionListComponent extends Component {
    render() {
        return (
            <View style={styles.container}>
                {/* 定义Section，需要先定义sections字段数据 */}
                <SectionList sections={[
                    {title: 'A', data: ['Apple', 'Ace']},
                    {title: 'D', data: ['Devin', 'Dan', 'Dominic']},
                    {title: 'J', data: ['Jackson', 'James', 'Jillian', 'Jimmy', 'Joel', 'John', 'Julie']},
                ]}
                             renderSectionHeader={({section}) => <Text style={styles.sectionHeader}>{section}</Text>}
                             renderItem={({item}) => <Text style={style.item}>{item}</Text>}
                             keyExtractor={(item, index) => index}
                />
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        paddingTop: 22,
    },
    sectionHeader: {
        paddingTop: 2,
        paddingStart: 10,
        paddingEnd: 10,
        paddingBottom: 2,
        fontSize: 14,
        fontWeight: 'bold',
        backgroundColor: '#abcdef',
    },
    item: {
        padding: 10,
        fontSize: 18,
        height: 44,
    },
});
